/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Directory structure:
 *
 *  stylesheets/
 *  |
 *  |-- application/          # Styles for specific pages.
 *  |   |-- allies.scss       # Etc...
 *  |   ...
 *  |
 *  |-- base/                 # Variables and other common project styles.
 *  |   |-- _colors.scss      # Color variables.
 *  |   |-- _fonts.css        # Font variables and imports.
 *  |   ...                   # etc.
 *  |
 *  `-- application.css.scss  # primary Sass file
 *
 * Any CSS and SCSS file within this directory, lib/assets/stylesheets, vendor/assets/stylesheets,
 * or vendor/assets/stylesheets of plugins, if any, can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any styles
 * defined in the other CSS/SCSS files in this directory. It is generally better to create a new
 * file per style scope.
 *
 *
 *= require_self
 */

@import "compass/utilities";
@import "base/*";
@import "font-awesome-sprockets";
@import "font-awesome";

/* Text */

body, html {
  margin: 0 auto;
  font: $body-font-size $font-family;
  font-weight: $xl;

  @media screen and (max-width: $medium) {
    margin: 0 auto;
    font: $font18 $font-family;
    font-weight: $xl;
  }

  @media screen and (max-width: $small) {
    margin: 0 auto;
    font: $font16 $font-family;
    font-weight: $xl;
  }
}

.small_font {
  font: $small-font $font-family;
  font-weight: $xl;

  @media screen and (max-width: $small) {
    font: $font12 $font-family;
    font-weight: $xl;
  }
}

p {
  word-wrap: break-word;
}

a:link, a:visited, .link_style {
  text-decoration: none;
  color: $link-color;
  border-bottom: 1px dotted $link-color;
  cursor: pointer;
}

a:hover, .link_style:hover {
  text-decoration: none;
  color: $link-color;
  border-bottom: 1px dotted $link-color;
  opacity: 0.5;
}

.anchor {
  border-bottom: 1px dotted $primary-text-color;
  cursor: pointer;
}

// TODO(juliepagano): This is probably not what we want long-term. Come back
// and clean up table css.
table {
  border-collapse: separate;
}

strong, b {
  color: $secondary-text-color;
}

ul:not(.ui-autocomplete, .no_bullet_list),
ol:not(.ui-autocomplete, .no_bullet_list)  {
  padding-left: 0;
}

ul:not(.ui-autocomplete, .no_bullet_list) li:not(.ui-autocomplete, .no_bullet_list),
ol:not(.ui-autocomplete, .no_bullet_list) li:not(.ui-autocomplete, .no_bullet_list)  {
  list-style-position:inside;
}


li:not(.ui-autocomplete, .no_bullet_list) {
  list-style-type: circle;
}

ul.no_bullet_list {
  text-align: center;
  padding: 0;
  margin: 0;
}

ul.no_bullet_list li {
  list-style-type: none;
}

/* Padding */

.padding_right {
  padding-right: 40px !important;

  @media screen and (max-width: $medium) {
    padding-right: 0 !important;
  }
}

.padding_left {
  padding-left: 40px !important;
}

.padding_top {
  padding-top: 40px !important;
}

.padding_bottom {
  padding-bottom: 40px !important;
}

.small_padding_right {
  padding-right: 20px !important;
}

.small_padding_left {
  padding-left: 20px !important;
}

.small_padding_top {
  padding-top: 20px !important;
}

.small_padding_bottom {
  padding-bottom: 20px !important;
}

/* Margin */

.margin_right {
  margin-right: 40px !important;
}

.small_margin_right {
  margin-right: 20px !important;
}

.smaller_margin_right {
  margin-right: 10px !important;
}

.margin_left {
  margin-left: 40px !important;
}

.small_margin_left {
  margin-left: 20px !important;
}

.smaller_margin_left {
  margin-left: 10px !important;
}

.margin_top {
  margin-top: 40px !important;
}

.small_margin_top {
  margin-top: 20px !important;
}

.smaller_margin_top {
  margin-top: 10px !important;
}

.margin_bottom {
  margin-bottom: 40px !important;
}

.small_margin_bottom {
  margin-bottom: 20px !important;
}

.smaller_margin_bottom {
  margin-bottom: 10px !important;
}

.no_margin_top{
  margin-top: 0px !important;
}

.no_margin_bottom {
  margin-bottom: 0px !important;
}

.no_margin_left {
  margin-left: 0px !important;
}

.no_margin_right {
  margin-right: 0px !important;
}

/* Divs */

.right {
  text-align: right;
}

.center {
  text-align: center;
}

.no_center {
  text-align: left !important;
}

.center_div {
  margin: 0 auto;
}

.spacer {
  width: 100%;
  height: 40px;

  @media screen and (max-width: $medium) {
    height: 20px;
  }
}

.horizonal_divider {
  width: 100%;
  height: 1px;
  background-color: $subtle-secondary-text-color;
  margin-top: 40px;
  margin-bottom: 40px;

  @media screen and (max-width: $medium) {
    margin-top: 20px;
    margin-bottom: 20px;
  }
}

.vertical_divider {
  width: 1px;
  background-color: $subtle-secondary-text-color;
  height: 100%;
  margin-left: 10px;
  margin-right: 10px;

  @media screen and (max-width: $medium) {
    margin-left: 20px;
    margin-right: 20px;
  }
}

.stats_divider {
  width: 100%;
  height: 1px;
  background-color: $subtle-secondary-text-color;
  margin-bottom: 40px;

  @media screen and (max-width: $medium) {
    margin-bottom: 20px;
  }
}

.align_left {
  float: left;
  display: inline-block;
}

.align_right {
  float: right;
  display: inline-block;
}

.align_left, .align_right {
  @media screen and (max-width: $medium) {
    display: block;
    float: none;
  }
}

.clear {
  clear: both;
}

#container {
  margin: 0 auto;
  padding: 0;
  background-color: $background-color;
}

.display_none {
  display: none;
}

.display_block {
  display: block !important;
}

.display_inline {
  display: inline !important;
}

.display_inline_block {
  display: inline-block !important;
}

.no_title, .yes_title {
  width: auto;
}

.yes_title {
  cursor: help;
}

/* Page Title */

#page_title {
  width: 100%;
  background-image: image-url('/assets/welcome.svg');
  background-size: cover;
  background-repeat: no-repeat;
  background-position: left center;
}

.overlay {
  background: $overlay-color;
}

#page_title_content {
  padding: 40px 60px;
  font-size: $page-title;
  font-weight: $lg;
  line-height: $page-title;
  color: $header-text-color;

  @media screen and (max-width: $medium) {
      padding: 20px;
      font-size: $font30;
      font-weight: $lg;
      line-height: $font30;
  }
}

#page_title_content a:link,
#page_title_content a:visited {
  text-decoration: none;
  border: none;
  color: $header-text-color;
}

#page_title_content a:hover {
  text-decoration: none;
  border: none;
  color: $header-text-color;
  opacity: 0.5;
}

/* Page Edit and New */

a.page_edit:link,
a.page_edit:visited,
a.page_new:link,
a.page_new:visited,
a.page_search:link,
a.page_search:visited {
  text-decoration: none;
  border: none;
  color: $header-text-color;
}

a.page_edit:hover,
a.page_new:hover,
a.page_search:hover {
  text-decoration: none;
  border: none;
  color: $header-text-color;
  opacity: 0.5;
}

/* Announcement */

#announcement {
  text-align: center;
  background-color: $highlight-text-color;
  padding: 20px 60px;
  line-height: 30px;

  @media screen and (max-width: $medium) {
    padding: 20px;
    line-height: 26px;
  }
}

/* Content */

#content {
  padding: 40px 60px;
  line-height: 150%;

  @media screen and (max-width: $medium) {
    padding: 20px;
  }
}

.headline {
  color: $header-text-color;
  font-size: $page-title;

  @media screen and (max-width: $medium) {
    font-size: $font26;
    line-height: 40px;
  }

  @media screen and (max-width: $small) {
    font-size: $font22;
    line-height: 36px;
  }
}

.branding_title {
  font-family: $font-family;
  font-weight: $lg;
  text-transform: lowercase;
  color: $header-text-color;
}

.branding_subtitle {
  padding: 6px 0px 12px 0px;
  border-top: 2px solid $header-text-color;
  border-bottom: 2px solid $header-text-color;

  @media screen and (max-width: $medium) {
    padding: 0px 0px 4px 0px;
  }
}

.subtle {
  color: $subtle-secondary-text-color;
}

.text_align_left {
  text-align: left !important;
}

.text_align_right {
  text-align: right !important;
}

.subtitle {
  font: $font34 $font-family;
  font-weight: $md;
  text-align: center;

  @media screen and (max-width: $medium) {
    font: $font30 $font-family;
    font-weight: $md;
    text-align: center;
  }
}

.block {
  display: block !important;
}

.inline-block {
  display: inline-block;
  overflow: hidden;
  white-space: nowrap;
}

.spacing {
  margin-right: 10px !important;

  @media screen and (max-width: $medium) {
    margin-right: 0 !important;
    margin-bottom: 10px !important;
  }
}

/* Links */

a.gravatar:link,
a.gravatar:visited {
  text-decoration: none;
  border: none;
}

a.gravatar:hover {
  text-decoration: none;
  border: none;
  opacity: 0.5;
}

a.highlight:link,
a.highlight:visited {
  text-decoration: none;
  background-color: $secondary-text-color;
  color: $header-text-color !important;
  border-bottom: none !important;
  padding: 10px;

  @media screen and (max-width: $small) {
    padding: 5px;
  }
}

a.highlight:hover {
  text-decoration: none;
  background-color: $secondary-text-color;
  color: $header-text-color !important;
  border-bottom: none !important;
  opacity: 0.5;
  padding: 10px;

  @media screen and (max-width: $small) {
    padding: 5px;
  }
}

/* Images */

img {
  max-width: 100%;
}

.mini_profile_picture {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  border: 2px solid $container-color;
  object-fit: cover;

  @media screen and (max-width: $small) {
    width: 50px;
    height: 50px;
  }
}

.contributor_picture,
.profile_picture {
  width: 55px;
  height: 55px;
  border-radius: 50%;
  border: 2px solid $container-color;
  margin: 0 auto;
  object-fit: cover;

  @media screen and (min-width: $small + 1) {
    width: 150px;
    height: 150px;
  }
}

.home_picture {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  border: 2px solid $container-color;
  margin: 0 auto;
  display: block;
  overflow: hidden;
  object-fit: cover;

  @media screen and (min-width: $medium + 1) {
    width: 100px;
    height: 100px;
  }
}

.small_profile_picture_div {
  width: 100px;
  height: 100px;

  @media screen and (max-width: $small) {
    width: 50px;
    height: 50px;
  }
}

.profile_picture_div {
  width: 150px;
  height: 150px;

  @media screen and (max-width: $small) {
    width: 55px;
    height: 55px;
  }
}

/* Form Elements and Input fields */

label {
  font-size: $font30;
  font-weight: $lg;

  @media screen and (max-width: $medium) {
    font-size: $font26;
  }
}

.label {
  width: auto;
  display: inherit;
  font-size: $font30;
  margin-bottom: 20px;

  @media screen and (max-width: $medium) {
    font-size: $font26;
    margin-bottom: 20px;
  }
}

.label i, .sidebar_label i {
  opacity: 0.5;
}

textarea {
  width: 50%;
  height: 100px;
}

input,
textarea,
select,
fieldset {
  border: 1px solid $field-color;
  padding: 10px;
  box-shadow: 0 0 2px $field-color inset;
  background-color: $background-color;
  font: $font20 $font-family;
  margin-right: 10px;
  box-sizing: border-box;

  @media screen and (max-width: $medium) {
    width: 100%;
  }
}

input[type="checkbox"],
input[type="radio"] {
  margin: 0 10px 0 5px;
  width: auto;
  height: auto;
  box-shadow: none;
}

.field input[type="text"],
.field input[type="passsword"],
.field input[type="email"] {
  margin-right: 0px;
}


input[type="submit"] {
  border: 1px solid $container-color;
  box-shadow: 0 0 2px $container-color inset;
  color: $container-color;
  background: $background-color;
  font: $font20 $font-family;
}

input[type="submit"]:hover {
  border: 1px solid $container-color;
  box-shadow: 0 0 2px $container-color inset;
  color: $container-color;
  background: $background-color;
  opacity: 0.5;
}

.field,
.actions {
  margin-bottom: 40px;

  @media screen and (max-width: $medium) {
    margin-bottom: 20px;
  }
}

.full_field,
.name_field {
  width: 100%;
}

.toggle_button:link, .toggle_button:visited {
  font-size: $font27;
  color: $primary-text-color;
  float: right;
  border: none;
}

.sidebar {
  @media screen and (min-width: $medium) {
    width: 30%;
  }
}

.sidebar_field {
  padding: 15px 15px 15px 0px;

  @media screen and (max-width: $medium) {
    padding: 10px 10px 10px 0px;
    width: 100%;
  }
}

.sidebar_label label, .sidebar_label {
  font-size: $font24;
}

.sidebar_label.expand_toggle label {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  cursor: pointer;
}

.special_textarea {
  height: 200px;
}

/* Tables */

.action {
  color: $link-color;
  margin-right: 10px;
}

.vertical_align_top {
  vertical-align: top;
}

.vertical_align_middle {
  vertical-align: middle;
}

.vertical_align_bottom {
  vertical-align: bottom;
}

/* Table */

div.table {
  display: table;
  table-layout: auto;
  width: 100%;
  border-collapse: separate;
}

div.table div.table_row {
  display: table-row;

  @media screen and (max-width: $medium) {
    display: block;
  }
}

div.table div.table_cell {
  display: table-cell;
  word-break: break-word;

  @media screen and (max-width: $medium) {
    display: block;
  }
}

/* Errors and Notices */

.field_with_errors {
  width: auto;
  display: inherit;
  color: $alert-color;
  font-weight: bold;
}

.notice {
  color: $notice-color;
  font-weight: bold;
  margin-bottom: 40px;
  border: 1px solid $notice-color !important;
  box-shadow: 0 0 2px $notice-color inset !important;
  padding: 10px;
}

.alert {
  color: $alert-color;
  font-weight: bold;
  margin-bottom: 40px;
  border: 1px solid $alert-color !important;
  box-shadow: 0 0 2px $alert-color inset !important;
  padding: 10px;
}

.viewers_indicator {
  color: $subtle-secondary-text-color;
  font-weight: bold;
  border: 1px solid $subtle-secondary-text-color !important;
  box-shadow: 0 0 2px $subtle-secondary-text-color inset !important;
  padding: 10px;
}

#error_explanation,
.error_explanation {
  color: $alert-color;
  font-size: $font30;
  font-weight: $lg;
  margin-bottom: 40px;

  @media screen and (max-width: $medium) {
    font-size: $font26;
  }

  h2 {
    font-weight: $lg;
    font-size: $font30;
    padding: 0;
    margin: 0px 0px 20px 0px;
    color: $secondary-text-color;

    @media screen and (max-width: $medium) {
      font-size: $font26;
      margin: 0px 0px 10px 0px;
    }
  }

  ul {
    padding-left: 0;
    margin-top: 0;
    margin-bottom: 40px;
    list-style-position: inside;

    @media screen and (max-width: $medium) {
      margin-bottom: 20px;
    }

    @media screen and (max-width: $small) {
      margin-bottom: 10px;
    }
  }
}

.hide_on_mobile {
  @media screen and (max-width: $small) {
    display: none;
  }
}

/* Font Awesome */

.fa-inline {
  margin-right: 10px;
}

.fa-left {
  margin-left: 20px;
}

/* close icon */
.fa-times {
  cursor: pointer;
}

/* Focused input fields */

textarea:focus, input[type="text"]:focus, input[type="number"]:focus, input[type="password"]:focus, input[type="email"]:focus{
  border-color: $field-color;
  box-shadow: 0px 0px 2px $field-color;
}

/* Date Picker */

.ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default {
  color: $secondary-text-color !important;
}

#ui-datepicker-div {
  font: $font20 $font-family !important;
  font-weight: $xl !important;

  @media screen and (max-width: $medium) {
    font: $font18 $font-family !important;
    font-weight: $xl !important;
  }

  @media screen and (max-width: $small) {
    font: $font16 $font-family !important;
    font-weight: $xl !important;
  }
}

@import "application/*";
